<template>
  <view class="page-container">
    <GlobalTopBar
      ref="topBarRef"
      class="topbars fixed"
      :class="{ ac: store.userInfo.is_corporate === 1 }"
      :isLeft="true"
      color="#fff"
    >
      <template #title><text style="color: #fff">会员中心</text></template>
    </GlobalTopBar>
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <view class="page_content">
      <!-- 顶部信息 -->
      <view class="topinfo" :class="{ ac: store.userInfo.is_corporate === 1 }">
        <view class="userinfo flex">
          <image
            class="headimg"
            :src="store.userInfo?.headimg || `${store.imgDomain}my_hade.png`"
            mode="scaleToFill"
          />
          <view class="textinfo">
            <view class="t1">{{ store.userInfo?.nick_name }}</view>
            <view class="t2 flex" v-if="levelData.id != store.userInfo.level_id"
              >您还没有开通过{{ levelData.user_level_title
              }}<uni-icons color="#fff" type="info" size="18"></uni-icons
            ></view>
            <view class="t2 flex" v-else
              >{{
                `${store.userInfo?.level_title_text}：${formatTimestamp(
                  store.userInfo?.level_end_at,
                )}`
              }}<uni-icons color="#fff" type="info" size="18"></uni-icons
            ></view>
          </view>
        </view>
        <!-- 会员价格列表 -->
        <view class="ul">
          <view
            class="li"
            :class="{ ac: indexs === index }"
            v-for="(item, index) in liList"
            :key="index + 1"
            @click="indexs = index"
          >
            <view class="tit">{{ item.user_level_title }}</view>
            <view class="t2">
              <text style="font-size: 24rpx">￥</text>{{ item.price }}</view
            >
            <view class="t3">{{ item.show_price }}</view>
          </view>
        </view>
      </view>
      <!-- 会员介绍 -->
      <view class="hyjs">
        <view class="tit"
          ><image
            :src="
              store.userInfo.is_corporate === 2
                ? `${store.imgDomain}member_1.png`
                : `${store.imgDomain}member_2s.png`
            "
            mode="scaleToFill"
          />
          <text>会员介绍</text></view
        >
        <!--  -->
        <view class="jsbox">
          <view v-html="levelData.content"> </view>
          <view
            v-if="!levelData.content"
            class="flex_center"
            style="flex-direction: column; transform: translateY(100rpx)"
          >
            <image
              class="wvip_img"
              :src="`${store.imgDomain}vip_1.png`"
              mode="widthFix"
            />
            <text>暂无介绍</text>
          </view>
        </view>
      </view>
      <!-- 协议开通 -->
      <view class="xyktbox" v-if="liList.length">
        <view
          class="btn"
          :class="{ ac: store.userInfo.is_corporate === 1 }"
          @click="createUserLevelOrder"
          >￥ <text>{{ levelData.price }}</text> 确认协议并{{
            levelData.id === store.userInfo.level_id ? '续费' : '开通'
          }}</view
        >
        <label class="radio" @click="radiovalue = !radiovalue"
          ><radio
            style="transform: scale(0.8)"
            color="#007AF0"
            value="1"
            :checked="radiovalue"
          /><text
            >我已阅读并同意
            <text
              style="color: #3475e0"
              @click.stop="
                store.to(
                  '/pages/public/agreement?url=wxapp/user/getIndividualVipAgreement',
                )
              "
              >《个人VIP协议》</text
            ></text
          ></label
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';

const store = useCounterStore();
const userInfo = ref();
const indexs = ref(0);
const liList = ref([]);
const radiovalue = ref(false);

const user_level_id = computed(() => {
  if (!liList.value.length) return;
  return liList.value[indexs.value]?.id;
});
const levelData = computed(() => {
  if (!liList.value.length) return {};
  return liList.value[indexs.value];
});

// 获取VIP列表数据
const getUserLevelList = async () => {
  liList.value = await request('wxapp/user/getUserLevelList');
  liList.value = liList.value.map((item) => {
    item.content = item.content?.replace(
      /style=""/g,
      'style="width:100%;height:auto;"',
    );
    return item;
  });
};

// 创建VIP购买订单
const createUserLevelOrder = async () => {
  if (!radiovalue.value) {
    uni.showToast({
      title: '请先阅读并同意《用户协议》',
      icon: 'none',
    });
    return;
  }
  if (!user_level_id.value) return;
  const data = await request(
    'wxapp/user/createUserLevelOrder',
    { user_level_id: user_level_id.value },
    'post',
  );

  uni.requestSubscribeMessage({
    tmplIds: ['QwcJKbRnxKqOe8scko7WFw3vX9jcUpzqcDrbQeRklcA'], // 替换为实际模板ID，
    complete() {
      if (levelData.price == 0) {
        uni.reLaunch({
          url: `/pages/my/paymentInquiry?tid=${data.tid}&index=1`,
        });
      } else {
        wx.requestPayment({
          timeStamp: data.wx_app_pay_param.timeStamp,
          nonceStr: data.wx_app_pay_param.nonceStr,
          package: data.wx_app_pay_param.package,
          signType: data.wx_app_pay_param.signType,
          paySign: data.wx_app_pay_param.paySign,
          success: function (res) {
            uni.reLaunch({
              url: `/pages/my/paymentInquiry?tid=${data.tid}&index=1`,
            });
          },
          fail: async function (err) {
            await request(
              'wxapp/user/delUserLevelOrder',
              { user_level_order_id: data.order_id },
              'post',
            );
            uni.showToast({
              title: '支付失败',
              icon: 'none',
            });
          },
          complete: function (res) {},
        });
      }
    },
  });
};

onShow(() => {
  getUserLevelList();
});
</script>

<style lang="scss" scoped>
.page-container {
}
.topbars {
  background: linear-gradient(to right, #3c9fff, #3184ff);
  &.ac {
    background: linear-gradient(to right, #0b2977, #0a2875);
  }
}
.page_content {
  .topinfo {
    background: linear-gradient(to right, #3c9fff, #3184ff);
    box-sizing: border-box;
    padding: 30rpx 25rpx;
    &.ac {
      background: linear-gradient(to right, #0b2977, #0a2875);
    }
    .userinfo {
      color: #fff;
      .headimg {
        margin-right: 20rpx;
        width: 71rpx;
        height: 71rpx;
        border-radius: 50%;
        border: 1rpx solid #fff;
      }
      .textinfo {
        .t1 {
          font-size: 30rpx;
          margin-bottom: 6rpx;
        }
        .t2 {
          font-size: 24rpx;
        }
        .t3 {
          text-align: center;
          background-color: #fcba54;
          line-height: 30rpx;
          border-radius: 15rpx;
          color: #fff;
          padding: 0 20rpx;
          font-size: 20rpx;
        }
      }
    }
    .ul {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      margin: 30rpx 0;
      .li {
        margin-right: 22rpx;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 219rpx;
        height: 202rpx;
        background-color: #cbe5ff;
        border: 1px solid #8ebcfd;
        border-radius: 20rpx;
        font-size: 24rpx;
        .t2 {
          margin: 20rpx 0;
          font-size: 42rpx;
          font-weight: 700;
        }
        .tit {
          font-weight: 700;
        }
        .t3 {
          color: $uni-text-color-grey;
          text-decoration: line-through;
        }
        &.ac {
          border-color: #e25a00;
          background-color: #fde2b0;
          .tit,
          .t3 {
            color: #bd6928;
          }
        }
      }
    }
  }
}
.hyjs {
  position: relative;
  padding: 50rpx 15rpx 180rpx;
  transform: translateY(-20rpx);
  background: linear-gradient(to bottom, #d8e9ff, #ffffff);
  border-radius: 20rpx 20rpx 0 0;
  .jsbox {
    padding-top: 20rpx;
    min-height: 50vh;
  }
  .tit {
    position: absolute;
    top: -14rpx;
    left: 50%;
    width: 287rpx;
    height: 56rpx;
    transform: translate(-50%);
    font-size: 30rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
      position: relative;
      z-index: 1;
    }
    image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 287rpx;
      height: 56rpx;
    }
  }
  .zcimg {
    width: 100%;
    height: 963rpx;
  }
}
.xyktbox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx 64rpx;
  box-sizing: border-box;
  background-color: #fff;
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 70rpx;
    text-align: center;
    background: linear-gradient(to right, #2f80ff, #3184ff);
    border-radius: 35rpx;
    color: #fff;
    &.ac {
      background: linear-gradient(to right, #0b2977, #0a2875);
    }
    text {
      margin: 0 10rpx;
      font-weight: 700;
    }
  }
}
.radio {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text {
    color: $uni-text-color-grey;
    font-size: 24rpx;
  }
}
.wvip_img {
  margin: 50rpx 0 20rpx;
  width: 160rpx;
}
</style>
